<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        margin-top: 100px;
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        /* transform 变换移动，不脱离文档流 */
        /* translateX 水平移动X轴，本身宽度的50% 向右移动50% */
        /* transform: translateX(50%); */
        /* translateY 垂直 移动-位移*/
        /* transform: translateY(50%); */
        /* transform: translateX(50px) translateY(50px); */
        /* 水平+垂直 移动-位移 */
        transform: translate(50px, 50px);
      }

      .outer1 {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        margin-top: 100px;
        position: relative;
      }
      .inner1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 实现子元素居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        /* margin-top: -50px;
        margin-left: -50px; */
        /* css3用变换位移写法也可以实现水平+垂直居中 */
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">2D变化</div>
    </div>

    <div class="outer1">
      <div class="inner1">2D变化</div>
    </div>
  </body>
</html>
